<template>
  <div class="app-container">
    <!--查询参数列-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入任务名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择任务状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusSelect"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务时间">
        <el-date-picker
          v-model="queryParams.day"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <a @click="toggleAdvanced" style="margin-left: 8px">
          {{ advanced ? '收起' : '展开' }}
          <i v-if="!advanced" class="el-icon-arrow-down"></i>
          <i v-if="advanced" class="el-icon-arrow-up"></i>
        </a>
      </el-form-item>
    </el-form>

    <!--表格顶部操作栏-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格数据-->
    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务编码" align="center" prop="taskNo" :show-overflow-tooltip="true" width="180"/>
      <el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" width="180" />
      <el-table-column label="起始日期" align="center" prop="startDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseDate(scope.row.startDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束日期" align="center" prop="endDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseDate(scope.row.endDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务企业" align="center" prop="companyName" :show-overflow-tooltip="true" width="200" />
      <el-table-column label="任务商品" align="center" prop="goodsName" width="120" />
      <el-table-column label="任务状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === 1 ">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 0 ">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          <span>{{ parseDateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleDetail(scope.row)"
            v-hasPermi="['system:role:edit']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="form.taskName" placeholder="请输入任务名称" maxlength="30" style="width: 240px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务编码" prop="taskNo">
              <el-input v-model="form.taskNo" placeholder="请输入任务编码" maxlength="30" style="width: 240px"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="任务企业" prop="companyId">
              <el-select v-model="form.companyIds" placeholder="请选择任务企业" multiple clearable filterable @change="handleCompanySelect" style="width: 240px">
                <el-option
                  v-for="dict in companyList"
                  :key="dict.companyId"
                  :label="dict.companyName"
                  :value="dict.companyId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务日期" prop="phone">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                style="width: 240px"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="taskType">
              <el-select v-model="form.taskType" placeholder="请选择任务类型" clearable filterable style="width: 240px">
                <el-option
                  v-for="dict in taskTypeSelect"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择任务状态" style="width: 240px">
                <el-option
                  v-for="dict in statusSelect"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务商品" prop="goodsId">
              <el-select v-model="form.goodsId" placeholder="请选择任务商品" style="width: 240px">
                <el-option
                  v-for="dict in goodsSelectList"
                  :key="dict.goodsId"
                  :label="dict.goodsName"
                  :value="dict.goodsId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="openGoodsList">选择任务商品</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="address">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择任务商品" :visible.sync="openGoodsListSelect" width="800px">
      <goods-select :goodsSelectList="goodsSelectList" :goodsSelectIdList="goodsSelectIdList"/>
    </el-dialog>
  </div>
</template>

<script>
import {listTask, randomTaskNo} from "@/api/detection/task/task";
import {parseDate} from "@/utils/moss";
import {listCompany} from "@/api/subject/company/company";
import {listGoods} from "@/api/goods/goods";
import {listItem} from "@/api/item/item";
import goodsSelect from "@/views/common/goodsSelect";

export default {
  name: "index",
  components: {goodsSelect},
  data() {
    return {
      queryParams: {
        taskName: "",
        status: undefined,
        day: parseDate(new Date()),
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      dateRange: [],
      advanced: false,
      openGoodsListSelect: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      loading: false,
      taskList: [],
      companyList: [],
      goodsList: [],
      itemList: [],
      total: 0,
      title: '',
      open: false,
      form: {},
      rules: {},
      statusSelect: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "停用",
          value: 0
        }
      ],
      taskTypeSelect: [
        {
          label: "日常检测",
          value: "normal"
        },
        {
          label: "突击检测",
          value: "raid"
        }
      ],
      goodsSelectList: [],
      goodsSelectIdList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      this.loading = true;
      listTask(this.queryParams).then(res => {
        this.taskList = res.data;
        this.total = res.total;
        this.loading = false;
      })
    },
    searchGoods(query){
      const goods = {"goodsName":query};
      listGoods(goods).then(res => {
        this.goodsList = res.data;}
      )
    },
    handleGoodsSelect(){

    },
    openGoodsList(){
      this.openGoodsListSelect = ! this.openGoodsListSelect
    },
    handleUpdate(){},
    handleCompanySelect(value){
      const selectCompany = this.companyList.filter(obj => value.includes(obj.companyId));
      this.form.companyId = selectCompany.map(o => o.companyId).join(",")
      this.form.companyName = selectCompany.map(o => o.companyName).join(",")
    },
    handleAdd(){
      this.reset();
      randomTaskNo().then(res => {
        this.form.taskNo = res.data
      })
      listCompany().then(res => {
        this.companyList = res.data
      })
      listItem().then(res => {
        this.itemList = res.data
      })
      this.open = true;
      this.title = "新增检测计划";
    },
    handleExport(){},
    handleDelete(){},
    handleQuery(){
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    resetQuery(){

    },
    handleDetail(){},
    toggleAdvanced(){
      this.advanced = ! this.advanced
    },
    reset(){
      this.form = {
        taskName: "",
        taskNo: "",
        companyIds: [],
        companyId: "",
        companyName: "",
        taskType: undefined,
        status: undefined,
        goods: [
          {
            goodsName: "",
            goodsId: "",
            itemList: []
          }
        ]
      }

      this.resetForm("form");
    },
    handleItemSelect(){

    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.sampleId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    submitForm(){
      console.log(this.form)
    },
    cancel() {
      this.open = false;
      this.reset();
    },
  }
}
</script>

<style scoped>

</style>
